import React, { Component } from 'react';
import {
  StyleSheet, Text, View, TouchableOpacity, Image, FlatList, TextInput, PixelRatio
} from "react-native";
import { GLOBAL } from '../../../config/global';
import StorageHelper from '../../../utils/storageHelper';
import { STORAGE_CONSTANT } from '../../../config/storage';
import { PageStatusIndex } from '../../../component/page-status/PageStatusIndex';
import MethodUtil from '../../../utils/MethodUtil';
import { API, API_GENERATE } from '../../../config/api';
import HTTP from '../../../utils/http';
import { style } from '../../../theme/style';
import { Common } from '../../../component/common/Common.js';
import { CommonDialog } from '../../../components/common/Dialog';
import { ScrollView } from 'react-native-gesture-handler';

const scale = GLOBAL.SCALE;
const TAB_LIST = [
  {
    name: '已认领业务员',
    status: 0
  },
  {
    name: '待认领收款',
    status: 1
  },
  {
    name: '待确认自由款',
    status: 2
  }
];
export class BalanceAndFree extends Component {
  static navigationOptions = ({ navigation, navigationOptions }) => {
    return {
      headerTitle: '资金账户',
      headerTintColor: style.color.white,
      headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
      headerRight: (<Image style={style.head.headRightEmpty} source={require('../../../imgs/goBackEmpty.png')} />),
      headerStyle: {  // 头部整体样式 
        elevation: 0,
        borderBottomWidth: 0,
        backgroundColor: style.color.themeColor
      },
      headerTitleStyle: {
        flex: 1,
        textAlign: 'center'
      }
    }
  };

  constructor(props) {
    super(props)
    let { tabIndex, companyId, corpType, corpId, isForeign } = props.navigation.state.params || {};
    this.state = {
      status: 'data',
      tabIndex: tabIndex || 0,
      listData: {
        capitalClaimList: []
      },
      freeData: [],
      isForeign
    }
    this.pageParams = {
      companyId,
      corpType,
      corpId,
      isForeign,
    }
  }

  async componentWillMount() {
    await this.initPage();
  }

  async initPage() {
    if (this.state.tabIndex === 0) {
      let res = await HTTP.POST(API_GENERATE(API.STAFF_CLAIM_LIST), this.pageParams);
      if (res) {
        this.setState({
          listData: res
        })
      }
    }
    else {
      if (this.state.tabIndex === 1) {
        this.pageParams.capitalType = 'waitClaim'
      }
      else if (this.state.tabIndex === 2) {
        this.pageParams.capitalType = 'waitConfirm'
      }
      let res = await HTTP.POST(API_GENERATE(API.FREE_CAPITAL_LIST), this.pageParams);
      if (res) {
        this.setState({
          freeData: res
        })
      }
    }
  }

  changeTab(index) {
    if (this.state.tabIndex === index) return;
    this.setState({
      tabIndex: index
    }, () => {
      this.initPage()
    })
  }
  _toMoney(num) {
    let { isForeign } = this.state
    let currency = (isForeign !== 1 ? '￥' : '$')
    if (num) {
      let str = MethodUtil.toThousands(num || 0, 2)
      let arr = str.split('')
      if (num > 0) {
        arr.splice(0, 0, currency);
      }
      else {
        arr.splice(1, 0, currency);
      }
      str = arr.join('')
      return str
    }
    else {
      return currency + ' 0'
    }
  }
  _renderToastWrap = () => {
    let { listData, freeData } = this.state
    return (
      <ScrollView>
        {this.state.tabIndex === 0 ?
          <View>
            <View style={{ alignItems: 'flex-end', marginTop: 17 * scale, marginRight: 47 * scale }}>
              <Text style={{ fontSize: 20 * scale, fontWeight: '600', color: '#000' }}>{this._toMoney(listData.claimAmtTotal)}</Text>
            </View>
            <View style={styles.contentBox} >
              {listData.capitalClaimList.length > 0 ?
                listData.capitalClaimList.map((item, index) => {
                  return (
                    <View style={[styles.contentItem, listData.capitalClaimList.length - 1 === index ? { borderBottomWidth: 0 } : null]} key={index}>
                      <Text style={styles.textType}>{item.bizStaffName}</Text>
                      <Text style={styles.textNum}>{this._toMoney(item.bizClaimAmount)}</Text>
                    </View>
                  )
                })
                : <View>
                  <Text style={{ paddingVertical: 18 * scale, paddingHorizontal: 12 * scale, color: "#000" }}>暂无数据</Text>
                </View>
              }
            </View>
          </View>
          : null
        }
        {this.state.tabIndex === 1 ?
          <View style={{ paddingBottom: 20 * scale }}>
            {freeData.length > 0 ? freeData.map((item, index) => {
              return (
                <View style={styles.contentBox} key={index} >
                  <View style={styles.contentItem}>
                    <Text style={styles.textType}>收款单类型</Text>
                    <Text style={styles.textNum}>{item.operateTypeName}</Text>
                  </View>
                  <View style={styles.contentItem}>
                    <Text style={styles.textType}>收款金额</Text>
                    <Text style={styles.textNum}>{this._toMoney(item.receiptAmount)}</Text>
                  </View>
                  <View style={styles.contentItem}>
                    <Text style={styles.textType}>未认款金额</Text>
                    <Text style={[styles.textNum, { color: '#CA0202' }]}>{this._toMoney(item.unClaimAmount)}</Text>
                  </View>
                  <View style={styles.contentItem}>
                    <Text style={styles.textType}>收款单号</Text>
                    <Text style={styles.textNum}>{item.receiptCode}</Text>
                  </View>
                  <View style={styles.contentItem}>
                    <Text style={styles.textType}>到账时间</Text>
                    <Text style={styles.textNum}>{item.receiptDate}</Text>
                  </View>
                  <View style={styles.contentItemBottom}>
                    <Text style={styles.textType}>收款摘要</Text>
                    <Text style={{ fontWeight: '600', marginTop: 16 * scale }}>{item.remark || '-'}</Text>
                  </View>
                </View>
              )
            }) :
              <View style={{ marginTop: 180 * scale }}>
                <PageStatusIndex status={'empty'} emptyText={'暂无记录'} onErrorPress={this.initPage} />
              </View>
            }
          </View>
          : null
        }
        {this.state.tabIndex === 2 ?
          <View style={{ paddingBottom: 20 * scale }}>
            {freeData.length > 0 ? freeData.map((item, index) => {
              return (
                <View style={styles.contentBox} key={index} >
                  <View style={styles.contentItem}>
                    <Text style={styles.textType}>收款单类型</Text>
                    <Text style={styles.textNum}>{item.operateTypeName}</Text>
                  </View>
                  <View style={styles.contentItem}>
                    <Text style={styles.textType}>收款金额</Text>
                    <Text style={styles.textNum}>{this._toMoney(item.receiptAmount)}</Text>
                  </View>
                  <View style={styles.contentItem}>
                    <Text style={styles.textType}>未认款金额</Text>
                    <Text style={[styles.textNum, { color: '#CA0202' }]}>{this._toMoney(item.unClaimAmount)}</Text>
                  </View>
                  <View style={styles.contentItem}>
                    <Text style={styles.textType}>收款单号</Text>
                    <Text style={styles.textNum}>{item.receiptCode}</Text>
                  </View>
                  <View style={styles.contentItem}>
                    <Text style={styles.textType}>到账时间</Text>
                    <Text style={styles.textNum}>{item.receiptDate}</Text>
                  </View>
                  <View style={styles.contentItemBottom}>
                    <Text style={styles.textType}>收款摘要</Text>
                    <Text style={{ fontWeight: '600', marginTop: 16 * scale }}>{item.remark || '-'}</Text>
                  </View>
                </View>
              )
            }) :
              <View style={{ marginTop: 180 * scale }}>
                <PageStatusIndex status={'empty'} emptyText={'暂无记录'} onErrorPress={this.initPage} />
              </View>
            }
          </View>
          : null
        }
      </ScrollView>
    )
  }


  //tab View
  _renderTabWrap() {
    const { tabIndex } = this.state;
    return (
      <View style={styles.tabWrap}>
        {
          TAB_LIST.map((item, index) => {
            return (
              <TouchableOpacity activeOpacity={1} onPress={() => { this.changeTab(index) }} key={index}
                style={[styles.tabItem, tabIndex == index ? { borderBottomColor: '#fff' } : { borderBottomColor: 'transparent' }]}
              >
                <Text style={[styles.tabText, tabIndex == index ? { fontWeight: 'bold' } : { opacity: .8 }]}>{item.name}</Text>
              </TouchableOpacity>
            )
          })
        }
      </View>
    )
  }

  render() {
    let { companyName } = this.props.navigation.state.params || {};
    return (
      <View style={styles.container}>
        <View style={styles.titleBox}>
          <Text style={styles.titleText}>{companyName}</Text>
        </View>
        {this._renderTabWrap()}
        {this._renderToastWrap()}
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: style.color.bgGray,
  },
  tabWrap: {
    backgroundColor: style.color.themeColor,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    paddingLeft: 18 * scale,
    paddingRight: 18 * scale,
  },
  tabText: {
    color: '#fff',
    textAlign: 'center'
  },
  tabItem: {
    paddingTop: 14 * scale,
    paddingBottom: 12 * scale,
    marginHorizontal: 10 * scale,
    flex: 1,
    borderBottomWidth: 2 * scale,
    marginBottom: 5 * scale
  },
  titleBox: {
    backgroundColor: style.color.themeColor,
    paddingLeft: 25 * scale,
    paddingVertical: 10 * scale
  },
  titleText: {
    color: '#fff',
    fontWeight: '600'
  },
  contentBox: {
    backgroundColor: '#fff',
    paddingHorizontal: 4 * scale,
    marginTop: 10 * scale,
    marginHorizontal: 16 * scale,
    paddingVertical: 5 * scale,
    elevation: 1,
    shadowColor: '#F0F3FC',  //  阴影颜色
    shadowOffset: { width: 0, height: 0 },  // 阴影偏移
    shadowOpacity: 1,  // 阴影不透明度
  },
  contentItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderBottomWidth: 0.5,
    borderBottomColor: '#E7E7E7',
    paddingVertical: 18 * scale,
    paddingHorizontal: 12 * scale,
  },
  contentItemBottom: {
    paddingVertical: 18 * scale,
    paddingHorizontal: 12 * scale,
  },
  textType: {
    fontSize: 14 * scale,
    color: '#000'
  },
  textNum: {
    fontSize: 14 * scale,
    fontWeight: '600',
    color: '#000'
  }
})